<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>机床信息</title>


  <link rel="stylesheet" type="text/css" href="./dhtmlxList/codebase/dhtmlxlist_skyblue.css">


  <script src="./js/echarts-v3.js"></script>
  <script src="./dhtmlxList/codebase/dhtmlxlist.js"></script>

</head>
<body <body onload="doOnLoad();">


  <!-- 左上方 -->
  <div style="width: 75%; height: 400px;  float: left;"> 
    <!-- 文本信息区域 -->
    <div style="float: left; width: 20%; height: 400px;">
      <!-- 稼动率 -->
      <div style="display: inline-block; height: 120px; width: 100%;">
        <p style="font-size: 16px"> 稼动率 </p>
        <p style="margin: 0; font-size: 40px; color: #00CD66"> 60% </p>
      </div>

      <div style="width: 100%; height: 280px;">
        <div style="display: block;">
          <p style="margin-left: 10px; font-size: 28px;">工况信息:</p>  
        </div>

        <div style="display: block; width: 100%; height: 40px; ">
          <p style="float: left; width: 50px;height: 40px; color: #32CD32; margin:0; margin-left:10px; font-size: 20px;"> 在线 </p>  
          <p id='work_time' style="float: right; width: 50%; margin: 0px; font-size: 20px">0 </p>
        </div>

        <div style="display: block; width: 100%; height: 32px;">
          <p style="float: left; margin:0; margin-left: 10px; width: 60px; color: #32CD32;  font-size: 14px;"> 当前任务 </p>  
          <p style="float: right; margin:0; padding-right: 10px; font-size: 14px">苏州乐听眼镜下盖</p>          
        </div>

        <div style="display: block; height: 32px;">
          <p style="float: left; margin:0; margin-left: 10px; width: 60px; color: #32CD32;  font-size: 14px;"> 下一任务 </p>  
          <p style="float: right; margin: 0; padding-right: 10px; font-size: 14px">天津晨星外壳</p>
        </div>

      </div>
    </div>





    <!-- 中上进度和事件轴 -->
    <div style="float: right; width: 75%; height: 400px; ">
      <div id="jdl_line" style="width: 100%; height: 50%; ">
        
      </div>

      <div id="slot" style="width: 100%; height: 50%; ">
        
      </div>

    </div>
  </div>

  <!-- 右侧设备列表 -->
  <div id = 'dev_list' style="float: right; width: 20%; height:800px;  margin: 0; ">
    
  </div>

  <!-- 左下方 -->
  <div id='wb_plan' style="float: left; width: 75%; height: 400px;">
    
  </div>


<!-- slot stack bar -->
<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('slot'));

  function buildData(){
    var res  = [];
    

    for(var i = 0; i < 50; i++){
      var record  = [i, 8 + Math.round(Math.random() * 4)];
      res.push(record);
    }

    return res;
  }

  var option  = {
      title:{
        text:'单个加工时间(min)',
        left:20
      },
      xAxis:{
        type:'value',
        splitLine:{
          show:false
        } 
      },
      yAxis:{
        splitLine:{
          show:true
        }
      },
      series:[
        {
          type:'bar',
          data: buildData(),          
          barWidth:8,
          label:{
            normal:{
              show:false,
              position:'top'  
            },
            emphasis:{
              show:true,
              position:'top'
            }
          }
        }
      ],
  };

  myChart.setOption(option);
</script>

<!-- 单机历史稼动率折线图-->
<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById("jdl_line"));

function getJdlData(){
    var res  = [];

    for(var i = 0; i < 10; i++){
      var date  = new Date();
      date.setHours(0);
      date.setMinutes(0);
      date.setSeconds(0);
      date.setDate(i + 1);

      var record  = [];
      record[0]  = date;
      record[1]  = 55 + Math.round(Math.random() * 5);

      res.push(record);
    }
    return res;

  };



  var option = {
      title:{
        text:"单机历史稼动率",
        left:20,
      },

      xAxis: {
          type: 'time',
          max:'dataMax',
          splitLine:{
            show:false
          }
      },
      yAxis: {
          type: 'value',
          min: 50,
          axisLabel:{
            formatter:function(value, index){
              return value + '%';
            }
          }
      },
      series: [{
          data: getJdlData(),
          type: 'line',
          smooth: true,
          label:{
            show:true,
            offset:[12, 0],
            formatter: function (params){
              return params.data[1] + '%';
            }
          }
      }]
  };
  myChart.setOption(option);
</script>

<!-- 右侧设备列表 -->
 <script>
      var   myList;
      function doOnLoad(){
        myList  = new dhtmlXList({
          container:"dev_list",
          select:true,
          type:{
            template:"#Name#", 
            height:40            
          }
        });

        myList.add(
          {
            Name:"打孔机1号"
          }
        );

        myList.add(
          {
            Name:"打孔机2号"
          }
        );

        myList.add(            
          {
            Name:"打孔机3号"
          }
        );
        myList.add(
          {
            Name:"打孔机4号"
          }
        );

        myList.add(
          {
            Name:"打孔机5号"
          }
        );

        myList.add(            
          {
            Name:"打孔机6号"
          }
        );
        myList.add(            
          {
            Name:"磨床1号"
          }
        ); 
        myList.add(            
          {
            Name:"磨床2号"
          }
        );  
        myList.add(            
          {
            Name:"磨床3号"
          }
        ); 
        myList.add(            
          {
            Name:"磨床4号"
          }
        );
        myList.add(            
          {
            Name:"加工中心1号"
          }
        ); 

        myList.add(            
          {
            Name:"加工中心2号"
          }
        ); 
        myList.add(            
          {
            Name:"铣床1号"
          }
        );   

        myList.add(            
          {
            Name:"铣床2号"
          }
        );  

        myList.select(myList.first());
      }
    </script>

<!-- 维保计划 -->
<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('wb_plan'));
 
  var graphData = [
    {
      name:'主轴润滑',
      value: Date.UTC(2019, 0, 3, 9, 0, 0, 0)
    },
    {
      name:'配电箱维保',
      value:Date.UTC(2019, 2, 5, 9, 0, 0, 0)
    },
    {
      name:'刀具清洗',
      value:Date.UTC(2019, 3, 17, 9, 0, 0, 0)
    },
  ];


  var links = graphData.map(function (item, idx) {
      return {
          source: idx,
          target: idx + 1
      };
  });
  links.pop();

  var option  = {
    tooltip:{
        position: 'top',
        formatter: '{a}-{b}'
    },

    visualMap: [{
      show:false,
        min: 0,
        max: 10000,
        calculable: true,
        seriesIndex: [0],
        orient: 'horizontal',
        top:'10%',
        left: '40%',
        bottom: 20
    }],

    calendar: [
    {
        // orient: 'vertical',
        // yearLabel: {
        //     margin: 40
        // },
        monthLabel: {
            nameMap: 'cn',
            margin: 20
        },
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        // cellSize: 40,
        range: '2019'
    }],

    series: [{
        name:'维保计划',
        type: 'graph',
        edgeSymbol: ['none', 'arrow'],
        coordinateSystem: 'calendar',
        links: links,
        symbolSize: 10,
        calendarIndex: 0,
        label:{
          show:true,
          color:'#000',
          offset:[20, 12]
        },
        data: graphData
    }]
  
  };

  myChart.setOption(option);
</script>

<!-- 定时刷新工作时间 -->
<script type="text/javascript">

  var add  = (function(){
    var counter  = 0;
    return function(){
      return counter += 1;
    }
  })();


  Date.prototype.format = function(fmt) { 
       var o = { 
          "M+" : this.getMonth()+1,                 //月份 
          "d+" : this.getDate(),                    //日 
          "h+" : this.getHours(),                   //小时 
          "m+" : this.getMinutes(),                 //分 
          "s+" : this.getSeconds(),                 //秒 
          "q+" : Math.floor((this.getMonth()+3)/3), //季度 
          "S"  : this.getMilliseconds()             //毫秒 
      }; 
      if(/(y+)/.test(fmt)) {
              fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
      }
       for(var k in o) {
          if(new RegExp("("+ k +")").test(fmt)){
               fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
           }
       }
      return fmt; 
  } 

  window.setInterval(function(){secondTick()}, 1000);


  function  secondTick(){
    var time  = new Date().format("hh:mm:ss");
    var element  = document.getElementById('work_time');

    element.innerHTML= time;
  }

</script>

</body>
</html>
